import { Breadcrumb, Button, message, Popover, Tag } from "antd";
import {
  ArrowLeftOutlined,
  BellOutlined,
  CloseOutlined,
  HomeOutlined,
  TranslationOutlined,
} from "@ant-design/icons";
import { useNavigate, useLocation } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { IDispatch, IStore, SaveBreadCrumbActions } from "@/store";
export default ({ itemRender, breadcrumb, content }: any) => {
  const store = useSelector((state: IStore) => state.user);
  const _ = useLocation();
  const dispatch = useDispatch<IDispatch>();
  const navigate = useNavigate();
  return (
    <div className="sm:hidden lg:flex overflow-x-auto flex-1">
      <div className="flex items-center">
        <ArrowLeftOutlined className="text-xl" onClick={() => navigate(-1)} />
        <Breadcrumb
          itemRender={itemRender}
          className="mx-1"
          items={breadcrumb.map((item: any) => ({
            href: item.path,
            title: <span className="text-black">{item.name}</span>,
          }))}
        ></Breadcrumb>
      </div>
      <div className="flex items-center">
        <Popover content={content} title="">
          <Tag
            onClick={() => {
              navigate("/home/index");
            }}
            style={{
              fontSize: "16px",
              padding: "2px 10px",
              cursor: "pointer",
            }}
            color={_.pathname == "/home/index" ? "green" : ""}
          >
            <HomeOutlined />
          </Tag>
        </Popover>
        <ul className="flex items-center text-xl -mt-1 overflow-x-auto">
          {store.breadcrumb.map((item, index) => {
            return (
              <li key={index}>
                <Tag
                  style={{
                    padding: "2px 10px",
                    cursor: "pointer",
                  }}
                  color={item.path == _.pathname ? "green" : ""}
                >
                  <span
                    onClick={() => {
                      navigate(item.path);
                    }}
                  >
                    {item.name}
                  </span>
                  <CloseOutlined
                    onClick={() => {
                      const arr = store.breadcrumb.filter(
                        (b) => b.path != item.path
                      );
                      if (item.path != _.pathname) {
                        dispatch(SaveBreadCrumbActions(arr));
                        return;
                      }
                      const i = store.breadcrumb.findIndex(
                        (i) => i.path == _.pathname
                      );
                      if (arr.length == 0) {
                        if (_.pathname == "/home/index") return;
                        navigate("/home/index");
                      } else {
                        navigate(arr[i - 1].path ?? "/home/index");
                      }
                      dispatch(SaveBreadCrumbActions(arr));
                    }}
                  />
                </Tag>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};
